<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shrio" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>角色管理</title>
    <script src="${ctx}/static/js/jquery.validate.min.js"></script>
    <script src="${ctx}/static/js/messages_bs_zh.js"></script>
    <style type="text/css">
        /* Apply these styles only when #preview-pane has
           been placed within the Jcrop widget */
        .jcrop-holder #preview-pane {
            display: block;
            position: absolute;
            z-index: 2000;
            top: 10px;
            right: -280px;
            padding: 6px;
            border: 1px rgba(0, 0, 0, .4) solid;
            background-color: white;

            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;

            -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        }

        /* The Javascript code will set the aspect ratio of the crop
           area based on the size of the thumbnail preview,
           specified here */
        #preview-pane .preview-container {
            width: 360px;
            height: 180px;
            overflow: hidden;
        }
    </style>

</head>
<body>

<div class="main-content-inner">
    <!-- #section:basics/content.breadcrumbs -->
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try {
                ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {
            }
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="ace-icon fa fa-home home-icon"></i>
                <a href="${ctx}/welcome">主页</a>
            </li>
            <li class="active">家族管理</li>
        </ul><!-- /.breadcrumb -->

    </div>
    <!-- /section:basics/content.breadcrumbs -->

    <div class="page-content">

        <c:if test="${not empty message}">
            <div id="message" class="alert alert-success">
                <button data-dismiss="alert" class="close">×</button>
                    ${message}</div>
        </c:if>

        <div class="page-header">
            <h1>
                家族管理
                <small>
                    <i class="ace-icon fa fa-angle-double-right"></i>
                    <c:choose>
                        <c:when test="${action eq 'create' }">
                            新增
                        </c:when>
                        <c:otherwise>
                            修改
                        </c:otherwise>
                    </c:choose>
                </small>
            </h1>
        </div><!-- /.page-header -->

        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="row">
                    <div class="col-xs-12">

                        <form id="inputForm" action="${ctx}/family/${action}" method="post" class="form-horizontal">
                            <input type="hidden" name="id" id="id" value="${family.id}"/>

                            <%---------------${family.fCreatetime}--%>
                            <%--<input type="hidden" name="user" value="${family.user}"/>--%>
                            <%--   <input  type="hidden" name="ctime" id="ctime" typeof="java.util.Date" value="${family.fCreatetime}" >--%>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                    家族名称: </label>
                                <div class="col-sm-9">
                                    <input type="text" maxlength="50" autocomplete="off" id="fName" name="fName"
                                           value="${family.fName}" placeholder="请输入家族名称"
                                           class="col-xs-10 col-sm-5 required"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                    家族描述: </label>
                                <div class="col-sm-9">
                                    <input type="text" maxlength="101" autocomplete="off" id="fDesp" name="fDesp"
                                           value="${family.fDesp}" placeholder="请输入家族描述"
                                           class="col-xs-10 col-sm-5 required"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                    创建人: </label>
                                <div class="col-sm-9">

                                    <c:choose>
                                        <c:when test="${action eq 'create' }">
                                            <input type="text" maxlength="101" autocomplete="off" id="fDesp" name="fDesp"
                                                   value="<shrio:principal />" disabled="disabled"
                                                   class="col-xs-10 col-sm-5 required"/>
                                        </c:when>
                                        <c:otherwise>
                                            <input type="text" maxlength="101" autocomplete="off" id="fDesp" name="fDesp"
                                                   value="<%--${family.user.name}--%>" disabled="disabled"
                                                   class="col-xs-10 col-sm-5 required"/>
                                        </c:otherwise>
                                    </c:choose>

                                </div>
                            </div>

                            <div class="clearfix form-actions">
                                <div class="col-md-offset-3 col-md-9">
                                    <button id="submit_btn" class="btn btn-info" type="submit">
                                        <i class="ace-icon fa fa-check bigger-110"></i>
                                        提交
                                    </button>
                                    &nbsp; &nbsp; &nbsp;
                                    <button id="cancel_btn" class="btn" type="reset" onclick="history.back()">
                                        <i class="ace-icon fa fa-undo bigger-110"></i>
                                        返回
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div><!-- /.span -->
                </div><!-- /.row -->
            </div>
        </div>

    </div><!-- /.page-content -->
</div>


<!-- inline scripts related to this page -->

<script>

    $(document).ready(function () {
        //为inputForm注册validate函数
        $("#inputForm").validate({
            rules: {
                fName: {
                    maxlength: 40,
                    minlength: 2,
                    required: true,
                    remote: "${ctx}/family/checkfName?userId=" + $("#id").val()
                },
                fDesp: {
                    maxlength: 100,
                    minlength: 2
                }
            },
            messages: {
                fName: {
                    maxlength: "角色名称长度不能超过40",
                    minlength: "角色名称长度最少为2",
                    remote: '该角色名称已存在'
                },
                fDesp: {
                    maxlength: "角色描述长度不能超过100",
                    minlength: "角色描述长度最少为2"
                }
            }
        });
    });
</script>
</body>
</html>
